<template>
  <div id="app">
    <el-form :model="ruleForm" :rules='rules' ref="ruleForm">
      <div>用户</div>
      <el-form-item label="用户名"  prop="username">
        <el-input v-model="ruleForm.username" ></el-input>
      </el-form-item>
      <div>密码</div>
      <el-form-item label="密码"  prop="password">
        <el-input v-model="ruleForm.password" ></el-input>
      </el-form-item>
    </el-form>
      <button @click="submitForm">提交</button>
  </div>
</template>

<script>
import elForm from "./components/el-form.vue";
import elInput from "./components/el-input.vue";
import elFormItem from "./components/el-form-item.vue";
export default {
  name: 'App',
  data(){
    return {
      ruleForm:{
        username:'',
        password:''
      },
      rules:{
        username:[
          { required: true, message: "请输入用户名" },
          { min: 3, max: 5, message: "长度在 3 到 5 个字符" }
        ],
         password: [{ required: true, message: "请输入密码"}]
      }
    }
  },
  methods:{
    submitForm(formName){
      this.$refs['ruleForm'].validate(valid =>{
        if(valid){
          alert('submit!')
        }else{
          console.log('error submit!!')
          return false ;
        }
      })
    }
  },
  components: {
   "el-form": elForm,
    "el-input": elInput,
    "el-form-item": elFormItem
  }
}
</script>

<style>

</style>
